<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>

		<link rel="stylesheet" type="text/css" href="./../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="./../plugins/easyui//themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./../plugins/easyui/themes/icon.css">

		<script type="text/javascript" src="./../plugins/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="./../plugins/easyui/jquery.easyui.min.js"></script>

		<script>
		    //add【加】   del【删除】   change/update【修改数据】   login【判断是否登录成功】
			var statue = 0;
			//新建用户
			function add() {
				
				$('#dlg').dialog('open').dialog('center').dialog('setTitle', '添加新用户信息');
				$('#fm').form('clear');
				statue = 1;
			}
			//修改用户
			function change() {
			
				var row = $('#userTable').datagrid('getSelected');
			
				if (row) {
					$('#dlg').dialog('open').dialog('center').dialog('setTitle', '修改用户信息');
			
					$('#fm').form('load', row);
					statue = 2;
				}		
			}
			
			//删除用户
			function del() {
				var row = $('#userTable').datagrid('getSelected');
				if (row) {
					$.messager.confirm('提示', '是否删除该用户', function(result) {
						if (result) {
							$.ajax({
								type: "POST",
								url: "http://192.168.150.202:8080/Api/customers",
								data: "action=del&id=" + row.id,
								success: function(respData) { //{"success":false,"msg":xx}
									if (respData.success) {
										$('#userTable').datagrid('reload');    //重新加载用户数据
									} else {
										$.messager.show({
											title: 'Error',
											msg: respData.msg
										});
									}
								}
							});
						}
					});
				}
			}		
			
			function saveDept() {
				var name = $("input[name='name']").val();
				var loginName = $("input[name='loginName']").val();
                var password = $("input[name='password']").val();
				var img = $("input[name='img']").val();
				var phone = $("input[name='phone']").val();
				
				if (statue == 1) {
					$.ajax({
						type: "POST",
						url: "http://192.168.150.202:8080/Api/customers",
						data: "name=" + name + "&loginName=" + loginName + "&password=" + password + "&img=" + img + "&phone=" + phone + "&action=add",

						success: function(responseData) {    //{"success":false,"msg":"xx"}
							if (responseData.success) {
								console.log(responseData);
								$.messager.show({
									content: '添加成功'
								});
								$('#dlg').dialog('close');     // 关闭对话框
								$('#userTable').datagrid('reload');
							} else {
								$.messager.show({
									title: 'Error',
									msg: responseData.msg
								});
							}
						}
					});
				} else {
			        var name = $("input[name='name']").val();
			        var loginName = $("input[name='loginName']").val();
                    var password = $("input[name='password']").val();
				    var img = $("input[name='img']").val();
				    var phone = $("input[name='phone']").val();
					var row = $('#userTable').datagrid('getSelected');
					
					var param = $("#fm").serialize(); // icon=x&name=yy

					if (row) {
						$.messager.confirm('提示', '是否修改用户信息', function(result) {
							if (result) {
								$.ajax({
									type: "POST",
									url: "http://192.168.150.202:8080/Api/customers",
									data: param + "&action=update&id=" + row.id,

									success: function(respData)   { //{"success":false,"msg":xx}
										if (respData.success) {
											$.messager.show({
												content: '修改成功'
											});
											$('#dlg').dialog('close'); // 关闭对话框
											$('#userTable').datagrid('reload');
										} else {
											$.messager.show({
												title: 'Error',
												msg: respData.msg
											});
										}

									}

								});
							}
						});
					}
				}
			}
		</script>
	</head>

	<body>
		<table id="userTable" class="easyui-datagrid" url='http://192.168.150.202:8080/Api/customers' method="get"
			toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true">
			<!--个人信息栏-->
			<thead>
				<tr>
					<th field="name" width="50">用户姓名</th>
					<th field="loginName" width="50">账号</th>
					<th field="password" width="50">密码</th>
					<th field="img" width="50">个人照片</th>
					<th field="phone" width="50">手机号码</th>
				</tr>
			</thead>
		</table>

		<!--toolbar  工具栏-->
		<div id="toolbar">
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="add()">添加用户信息</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="change()">修改用户信息</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="del()">删除用户信息</a>
		</div>

	
		<div id="dlg" class="easyui-dialog" style="width:400px"
			data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
			<form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
				<h3>执行操作</h3>
				<div style="margin-bottom:10px">
					<input name="name" class="easyui-textbox" required="true" label="用户姓名:" style="width:100%">
				</div>
				<div style="margin-bottom:10px">
					<input name="loginName" class="easyui-textbox" required="true" label="账号:" style="width:100%">
				</div>
				<div style="margin-bottom:10px">
					<input name="password" class="easyui-textbox" required="true" label="密码:" style="width:100%">
				</div>
				<div style="margin-bottom:10px">
					<input name="img" class="easyui-textbox" required="true" label="个人照片:" style="width:100%">
				</div>
				<div style="margin-bottom:10px">
					<input name="phone" class="easyui-textbox" required="true" label="手机号码:" style="width:100%">
				</div>
			</form>
		</div>
		<div id="dlg-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveDept()"
				style="width:170px">执行</a>
			<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
				onclick="javascript:$('#dlg').dialog('close')" style="width:170px">取消</a>
		</div>
		
	</body>
</html>
